<template>
  <div>
    <h2>计算属性</h2>
    <!-- 计算属性,必须当作属性来用,不能当作方法调用,即不能加小括号 -->
    <input type="text" v-model.lazy="xing" />
    <span>+</span>
    <input type="text" v-model.lazy="ming" />
    <span>=</span>
    <input type="text" v-model.lazy="fullName" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      xing: "李",
      ming: "四",
    };
  },
  //计算属性,要写到和data平级的computed中
  computed: {
    //所有的计算属性,都放在这里,必须返回计算的结果
    // fullName() {
    //   return this.xing + this.ming;
    // },
    //如果需要修改计算属性的值,需要写成对象格式(对象中要写get和set方法)
    fullName: {
      //当使用计算属性的时候,get执行
      get() {
        return this.xing + " " + this.ming;
      },
      //当修改计算属性的时候,set执行
      set(val) {
        // console.log(val);
        let arr = val.split(" ");
        console.log(arr);
        this.xing = arr[0];
        this.ming = arr[1];
      },
    },
  },
};
</script>

<style>
</style>